<!-- Page heading -->
<div class="page-head">
    <h2 class="pull-left"><i class="fa fa-building-o"></i> Laporan Pengeluaran Upah</h2>
    <!-- Breadcrumb -->
    <div class="bread-crumb pull-right">
        <a href="index.html"><i class="fa fa-home"></i> Home</a> 
        <!-- Divider -->
        <span class="divider">/</span> 
        <a href="#" class="bread-current">Lpu</a>
    </div>
    <div class="clearfix"></div>
</div>
<!-- Page heading ends -->

<div class="col-md-12">
    <div class="widget wgreen">
        <div class="widget-head">
            <div class="pull-left">Data List LPU</div>
            <div class="widget-icons pull-right">
                <a href="#" class="wminimize">
                    <i class="fa fa-chevron-up"></i>
                </a>

            </div>
            <div class="clearfix"></div>
        </div>
        <div class="widget-content" style="padding: 10px">
            <button type="button" ng-if="displayField(['<?= Lpu::role_admin ?>'])" class="btn btn-sm btn-primary" onclick="window.location.href = '<?= base_url() . $this->uri->segment(1, 0) . '/' . $this->uri->segment(2, 0) . '/viewNew' ?>'"><i class="fa fa-plus fa-fw"></i> Tambahkan LPU</button>
            <div class="clearfix">
                <br/>
            </div>
            <div class="page-tables">
                <div class="form-group col-lg-6">
                    <label class="col-lg-3 control-label">Perusahaan</label>
                    <div class="col-lg-8">
                        <select class="form-control" id="perusahaan" name="perusahaan">
                            <option selected> -- Semua Perusahaan -- </option>
                            <?php
                            foreach ($listPerusahaan as $i) {
                                echo "<option value='" . $i['PERUSAHAAN_ID'] . "'>" . $i['PERUSAHAAN_NAMA'] . "</option>";
                            }
                            ?>
                        </select>
                    </div>
                </div>
                <div class="form-group col-lg-6">
                    <label class="col-lg-3 control-label">Project</label>
                    <div class="col-lg-8">
                        <select class="form-control" id="project" name="project">
                            <option disabled selected> -- Semua Project -- </option>

                        </select>
                    </div>
                </div>
                <div class="form-group col-lg-6" id="main_project_form">
                    <label class="col-lg-3 control-label">Main Project</label>
                    <div class="col-lg-8">
                        <select class="form-control" id="main_project" name="main_project">
                            <option disabled selected> -- Semua Main Project -- </option>
                        </select>
                    </div>
                </div>
                <div class="form-group col-lg-6">
                    <label class="col-lg-3 control-label">RAB</label>
                    <div class="col-lg-8">
                        <select class="form-control" id="rab" name="rab">
                            <option disabled selected> -- Semua RAB -- </option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="clearfix">
            </div>
            <div class="page-tables">
                <div class="table-responsive">

                    <table cellpadding="0" cellspacing="0" border="0" id="tabel_list_lpu" width="100%" style="white-space: nowrap">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Kode LPU</th>
                                <th>Kode RAB</th>
                                <th>Tanggal</th>
                                <!--<th>Total Harga</th>-->
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    <div class="clearfix">
                    </div>
                </div>
            </div>
            <!-- End of Modal Section -->
        </div>

    </div>
</div>
<form id="formDetail" method="get"></form>
<div id="konfirmasiModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="judulModal">Konfirmasi Validasi LPB</h4>
            </div>
            <div class="modal-body">
                <h3 id="bodyModal" class="namaBarangHapus">Anda yakin akan memvalidasi LPB ini?</h3>                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="submitForm()" id="buttonYesModal">Ya</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Tidak</button>
            </div>
        </div>
    </div>
</div>

<script>
    var tabel_list_lpu = null;
    var base_url1 = '<?= base_url() ?>';
    var uri = '<?= $this->uri->segment(1, 0) . '/' . $this->uri->segment(2, 0) ?>';
    var base_url = base_url1 + uri;
    $(document).ready(function () {
        document.getElementsByClassName('has_sub')[1].setAttribute('class', 'has_sub open');
        init_tabel_list_lpu();
        $('#perusahaan').on('change', function () {
            reqDataDropdown({
                target_element: 'main_project',
                url: 'get_list_main_project',
                param: {
                    id_perusahaan: this.value
                },
                initial_text: '-- Semua Main Project --',
                ret_array: ['MAIN_PROJECT_ID', 'MAIN_PROJECT_KODE', 'MAIN_PROJECT_NAMA'],
                element_reset: ['project', 'rab']
            })
        });
        $('#main_project').on('change', function () {
            reqDataDropdown({
                target_element: 'project',
                url: 'get_list_project',
                param: {
                    id_main_project: this.value
                },
                initial_text: '-- Semua Project --',
                ret_array: ['PROJECT_ID', 'PROJECT_KODE', 'PROJECT_NAMA'],
                element_reset: ['rab']
            })
        });
        $('#project').on('change', function () {
            reqDataDropdown({
                target_element: 'rab',
                url: 'get_list_rab',
                param: {
                    id_project: this.value
                },
                initial_text: '-- Semua RAB --',
                ret_array: ['RAB_ID', 'RAB_KODE', 'RAB_NAMA'],
                element_reset: []
            })
        });
        $('#rab').on('change', function () {
            init_tabel_list_lpu();
        });
    });
    function reqDataDropdown(d) {
        $('#' + d.target_element).parent().parent().append('<img class="snake_loader" src="' + base_url1 + '/assets/default/img/snake_loader.gif" width="20">');
        console.log(d);
        $('#' + d.target_element).html('<option selected="" value="0">' + d.initial_text + '</option>');
        for (var i = 0, n_element_reset = d.element_reset.length; i < n_element_reset; i++) {
            var elmn = document.getElementById(d.element_reset[i]);
            while (elmn.children.length > 1) {
                elmn.children[1].remove();
            }
        }
        init_tabel_list_lpu();
        $.ajax({
            type: "get",
            url: base_url + '/' + d.url,
            data: d.param,
            success: function (data) {
                var val = JSON.parse(data);
                if (val.length > 0) {
                    var j2 = d.ret_array.length;
                    console.log('data lebih dari 0');
                    for (var i = 0, l = val.length; i < l; i++) {
                        console.log('proses data ke ' + i);
                        var v = val[i];
                        console.log(v);
                        var id = v[d.ret_array[0]];
                        var teks = '';
                        for (var j = 1; j < j2; j++) {
                            teks += v[d.ret_array[j]] + ' ';
                        }
                        console.log(id);
                        console.log(teks);
                        $('#' + d.target_element).append('<option value="' + id + '">' + teks + '</option>');
                    }
                }
                $('.snake_loader').remove();
            }
            , error: function (xhr, ajaxOptions, thrownError) {
                $('.snake_loader').remove();
            }
        });
    }
    function init_tabel_list_lpu() {
        if (tabel_list_lpu !== null) {
            tabel_list_lpu.fnDestroy();
        }
        tabel_list_lpu = $("#tabel_list_lpu").dataTable({
            "processing": true,
            "serverSide": true,
            order: [[0, "desc"]],
            "ajax": {
                'method': 'post',
                'data': {
                    perusahaan: $('#perusahaan').val(),
                    project: $('#project').val(),
                    main_project: $('#main_project').val(),
                    rab: $('#rab').val()
                },
                "url": "<?php echo base_url() . $this->uri->segment(1, 0) . '/' . $this->uri->segment(2, 0) . '/get_list_lpu_datatable'; ?>",
                "dataSrc": function (json) {
                    jsonData = json.data;
                    return jsonData;
                }
            },
            "createdRow": function (row, data, index) {
                var id = data[0];
                $('td', row).eq(0).html(index + 1);
                $('td', row).eq(1).html(data[1]);
                $('td', row).eq(2).html(data[5] + ' ' + data[7]);
                $('td', row).eq(3).html(data[2]);
                $('td', row).eq(4).html(data[6]);
                //$('td', row).eq(4).html(parseFloat(data[4]).formatMoney());
                var status_validasi = parseInt(data[3]);
                var html = '<div class="btn-group">' +
                        '<button class="btn btn-default btn-xs dropdown-toggle btn-info" data-toggle="dropdown">Aksi <span class="caret"></span></button>' +
                        '<ul class="dropdown-menu">' +
                        '<li><a href="<?= base_url() . $this->uri->segment(1, 0) . '/' . $this->uri->segment(2, 0) ?>/viewDetail?id=' + id + '"><i class="fa fa-eye fa-fw"></i> Detail</a></li>';
                if (isPermitted(['<?= Lpu::role_admin ?>']) && (status_validasi === 1 || status_validasi === 4)) {
                    html += '<li><a href="<?= base_url() . $this->uri->segment(1, 0) . '/' . $this->uri->segment(2, 0) ?>/viewEdit?id=' + id + '"><i class="fa fa-refresh fa-fw"></i> Ubah</a></li>';
                    html += '<li><a href="javascript:showDeleteDialog(' + id + ')"><i class="fa fa-trash-o fa-fw"></i> Hapus</a></li>';
                } else if (isPermitted(['<?= Lpu::role_validator ?>']) && (status_validasi == 2 || status_validasi == 5)) {
                    html += '<li><a href="javascript:validate(' + id + ')"><i class="fa fa-check fa-fw"></i>Validasi</a></li>' +
                            '<li><a href="javascript:reject(' + id + ')"><i class="fa fa-times fa-fw"></i>Tolak</a></li>';
                }
                html += '</ul>' +
                        '</div>';
                $('td', row).eq(5).html(html);
                $(row).attr('id', 'opname_' + id)
            }
        });
    }

    function reject(id) {
        var url = "<?= base_url() . $this->uri->segment(1, 0) . '/' . $this->uri->segment(2, 0) ?>/reject";
        $('#formDetail').attr('action', url);
        $('#formDetail').html('<input type="hidden" name="id" value="' + id + '">');
        $('#konfirmasiModal').modal();
        $('#judulModal').html('Konfirmasi Tolak Opname');
        $('#bodyModal').html('Apakah Anda yakin akan menolak LPU ini?');
    }

    function showDeleteDialog(id) {
        var url = "<?= base_url() . $this->uri->segment(1, 0) . '/' . $this->uri->segment(2, 0) ?>/delete";
        $('#formDetail').attr('action', url);
        $('#formDetail').html('<input type="hidden" name="id" value="' + id + '">');
        $('#konfirmasiModal').modal();
        $('#judulModal').html('Konfirmasi Hapus Opname');
        $('#bodyModal').html('Apakah Anda yakin akan menghapus LPU ini?');
    }

    function submitForm() {
        //$("#deleteModal").modal("hide");
        $("#formDetail").submit();
    }

    function validate(id) {
        var url = "<?= base_url() . $this->uri->segment(1, 0) . '/' . $this->uri->segment(2, 0) ?>/validate";
        $('#formDetail').attr('action', url);
        $('#formDetail').html('<input type="hidden" name="id" value="' + id + '">');
        $('#konfirmasiModal').modal();
        $('#judulModal').html('Konfirmasi Validasi Opname');
        $('#bodyModal').html('Apakah Anda yakin akan memvalidasi LPU ini?');
    }
</script>